<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>生产计划管理</el-breadcrumb-item>
      <el-breadcrumb-item>计划工单维护</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
      <el-row :gutter="10">
        <el-col :span="7">
          <el-input placeholder="请输入订单编号检索" v-model="query">
            <template #append>
              <el-button icon="el-icon-search" @click="getList">检索</el-button>
            </template>
          </el-input>
        </el-col>
        <el-col span="4">
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="addDialogVisible = true"
            >新增</el-button
          >
        </el-col>
      </el-row>
      <!-- 表格区域 -->
      <el-table
        stripe
        border
        ref="multipleTable"
        :data="shoporderMaintenanceList"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column prop="id" label="id" width="100" align="center">
        </el-table-column>
        <el-table-column
          prop="shoporder_no"
          label="工单编号"
          width="200"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="shoporder_numbers"
          label="订单数量"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="shoporder_item"
          label="物料编号"
          width="200"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="process_route"
          label="工艺路线"
          width="160"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="status"
          label="工单状态"
          width="100"
          align="center"
        >
        <template #default="scope">
            <span v-if="scope.row.status == 0">已创建</span>
            <span v-else-if="scope.row.status == 1">已下达 </span>
            <span v-else-if="scope.row.status == 2">生产中</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="shoporder_start_date"
          label="订单开始时间"
          width="170"
          align="center"
        >
          <template #default="scope">
            {{ formatDate(scope.row.shoporder_start_date) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="shoporder_end_date"
          label="订单完成时间"
          width="170"
          align="center"
        >
          <template #default="scope">
            {{ formatDate(scope.row.shoporder_end_date) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="site"
          label="挂靠站点"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="by_user"
          label="创建人"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="create_time"
          label="创建时间"
          width="170"
          align="center"
        >
          <template #default="scope">
            {{ formatDate(scope.row.create_time) }}
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNow"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="rowCount"
      >
      </el-pagination>
    </el-card>
    <!-- 添加对话框 -->
    <el-dialog title="新增工单" v-model="addDialogVisible" width="40%">
       <!-- 新增物料列表二级对话框 -->
      <el-dialog
        title="物料列表"
        v-model="shoporderDV"
        width="40%"
        append-to-body
      >
        <!-- 对话框内容 -->
        <el-table
          stripe
          border
          ref="multipleTable"
          :data="shoporderList"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          size="small"
        >
          <el-table-column prop="id" label="id" width="50" align="center">
          </el-table-column>
          <el-table-column
            prop="item_no"
            label="物料编号"
            width="190"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="item_name"
            label="物料名称"
            width="190"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="item_desc"
            label="物料描述"
            width="190"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column label="操作" width="95" align="center">
            <template #default="scope">
              <el-button size="mini" @click="addShoporderItem(scope.row)"
                >选择</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNow"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="rowCount"
        >
        </el-pagination>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="shoporderDV = false">取 消</el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 二级对话框结束 -->
       <!-- 新增工艺路线二级对话框 -->
      <el-dialog
        title="工艺路线列表"
        v-model="RouteDV"
        width="40%"
        append-to-body
      >
        <!-- 对话框内容 -->
        <el-table
          stripe
          border
          ref="multipleTable"
          :data="routingList"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          size="small"
        >
          <el-table-column prop="id" label="id" width="50" align="center">
          </el-table-column>
          <el-table-column
            prop="process_route"
            label="工艺路线"
            width="190"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="process_route_type"
            label="工艺路线类型"
            width="190"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="process_route_desc"
            label="工艺路线描述"
            width="190"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column label="操作" width="95" align="center">
            <template #default="scope">
              <el-button size="mini" @click="addProcessRoute(scope.row)"
                >选择</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNow"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="rowCount"
        >
        </el-pagination>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="RouteDV = false">取 消</el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 二级对话框结束 -->
      <!-- 对话框内容 -->
      <el-form
        :model="addForm"
        status-icon
        :rules="addFormrules"
        ref="addFormRef"
        label-width="120px"
      >
        <el-form-item label="所属站点" prop="site">
          <el-input v-model="addForm.site" placeholder="请选择所属站点"></el-input>
        </el-form-item>
        <el-form-item label="工单编号" prop="shoporder_no">
          <el-input v-model="addForm.shoporder_no" placeholder="请输入工单编号"></el-input>
        </el-form-item>
        <el-form-item label="工单数量" prop="shoporder_numbers">
          <el-input v-model="addForm.shoporder_numbers" placeholder="请输入工单数量"></el-input>
        </el-form-item>
        <el-form-item label="物料" prop="shoporder_item">
          <el-input v-model="addForm.shoporder_item" placeholder="请选择物料">
          <template #suffix>
          <i class="el-input__icon el-icon-search" @click="addshoporderItem"></i>
          </template>
          </el-input>
        </el-form-item>
        <el-form-item label="工艺路线" prop="process_route">
          <el-input v-model="addForm.process_route" placeholder="请选择工艺路线"> 
          <template #suffix>
          <i class="el-input__icon el-icon-search" @click="addprocessRoute"></i>
          </template>
          </el-input>
        </el-form-item>
        <el-form-item label="计划开始时间" prop="shoporder_start_date">
          <div class="block">
            <el-date-picker
            v-model="addForm.shoporder_start_date"
            @change="starttimeChanged"
            type="datetime"
            placeholder="选择开始时间"
          >
          </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="计划结束时间" prop="shoporder_end_date">
          <el-date-picker
            v-model="addForm.shoporder_end_date"
            @change="endtimeChanged"
            type="datetime"
            placeholder="选择结束期时间"
            
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="是否可用" prop="shoporder_status">
          <el-select v-model="addForm.shoporder_status" placeholder="请选择是否可用">
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="add">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      shoporderMaintenanceList: [],
      query: "",
      pageCount: 1,
      pageNow: 1,
      pageSize: 10,
      rowCount: 0,
      // 显示添加对话框
      addDialogVisible: false,
      //显示二级对话框
      shoporderDV: false,
      RouteDV:false,
      shoporderList:[],
      addForm: {
        site: "*",
        shoporder_no: "",
        shoporder_numbers: "",
        shoporder_item: "",
        process_route: "",
        shoporder_start_date: "",
        shoporder_end_date: "",
        shoporder_status: "",
      },
       addFormrules: {
        site: [],
        shoporder_no: [
          {
            required: true,
            message: "请输入工单编号",
            trigger: "blur",
          },
        ],shoporder_numbers: [
          {
            required: true,
            message: "请输入工单数量",
            trigger: "blur",
          },
        ],shoporder_item: [
          {
            required: true,
            message: "请输入物料",
            trigger: "blur",
          },
        ],process_route: [
          {
            required: true,
            message: "请输入工艺路线",
            trigger: "blur",
          },
        ],shoporder_start_date: [
          {
            required: true,
            message: "请选择计划开始时间",
            trigger: "blur",
          },
        ],shoporder_end_date: [
          {
            required: true,
            message: "请选择计划结束时间",
            trigger: "blur",
          },
        ],shoporder_status: [
          {
            required: true,
            message: "请选择是否可用",
            trigger: "blur",
          },
        ],}
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      this.$axios({
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
        method: "post",
        url: "/IE_MES/product_plan/shoporder_maintenance_findByPage.shtml",
        data: this.$qs.stringify({
          pageSize: this.pageSize,
          pageNow: this.pageNow,
          "shopOrderFormMap.shoporder_no": this.query,
        }),
      }).then((res) => {
        console.log(res.data);
        this.shoporderMaintenanceList = res.data.records;
        this.pageCount = res.data.pageCount;
        this.pageNow = res.data.pageNow;
        this.pageSize = res.data.pageSize;
        this.rowCount = res.data.rowCount;
      });
    },
    // 新增
    add() {
      this.$axios({
            headers: {
              "Content-Type":
                "application/x-www-form-urlencoded; charset=UTF-8",
            },
            method: "post",
            url: "/IE_MES/product_plan/shoporder_maintenance_addEntity.shtml",
            data: this.$qs.stringify({
              "shopOrderFormMap.site":this.addForm.site,
              "shopOrderFormMap.shoporder_no":this.addForm.shoporder_no,
              "shopOrderFormMap.shoporder_numbers":this.addForm.shoporder_numbers,
              "shopOrderFormMap.shoporder_item":this.addForm.shoporder_item,
              "shopOrderFormMap.process_route":this.addForm.process_route,
              "shopOrderFormMap.shoporder_start_date":this.formatDate(this.addForm.shoporder_start_date),
              "shopOrderFormMap.shoporder_end_date":this.formatDate(this.addForm.shoporder_end_date),
              "shopOrderFormMap.shoporder_status":this.addForm.shoporder_status,
            }),
      }).then((res) => {
            if (res.data == "{\"result\":\"success\",\"score\":\"\"}") {
              this.getList();
              this.$refs['addFormRef'].resetFields();
              this.addDialogVisible=false;
              this.$message({
                type: "success",
                message: "添加成功!",
              });
            }
          });
    },
    addshoporderItem(){
      this.shoporderDV = true;
      this.$axios({
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
        method: "post",
        url: "/IE_MES/item_resource/getItemMainFindByPage.shtml",
        data: this.$qs.stringify({
          pageSize: this.pageSize,
          pageNow: this.pageNow,
        }),
      }).then((res) => {
        console.log(res.data);
        this.shoporderList = res.data.records;
        this.pageCount = res.data.pageCount;
        this.pageNow = res.data.pageNow;
        this.pageSize = res.data.pageSize;
        this.rowCount = res.data.rowCount;
      });
    },
    addShoporderItem(row) {
      this.addForm.shoporder_item = row.item_no;
      this.shoporderDV = false;
    },
    addprocessRoute(){
      this.RouteDV = true;
      this.$axios({
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
        method: "post",
        url: "/IE_MES/workshop/routing_findByPage.shtml",
        data: this.$qs.stringify({
          pageSize: this.pageSize,
          pageNow: this.pageNow,
        }),
      }).then((res) => {
        console.log(res.data);
        this.routingList = res.data.records;
        this.pageCount = res.data.pageCount;
        this.pageNow = res.data.pageNow;
        this.pageSize = res.data.pageSize;
        this.rowCount = res.data.rowCount;
      });
    },
    addProcessRoute(row) {
      this.addForm.process_route = row.process_route;
      this.RouteDV = false;
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.getList();
    },
    handleCurrentChange(newPage) {
      this.pageNow = newPage;
      this.getList();
    },
    formatDate(data) {
      var date = new Date(data);
      var YY = date.getFullYear() + "-";
      var MM =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hh =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var mm =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var ss =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return YY + MM + DD + " " + hh + mm + ss;
    },
  },
};
</script>

<style lang="less" scoped>
// .el-form-item /deep/ .el-input__inner {
//   padding-right: 420px !important;
// }
.block {
  width:100% ;
}
</style>
